@keyframes rocketAnimationShow {
    from { opacity: 0; transform: translate(50%,50%); }
    to { opacity: 1; transform: translate(0%,0%); }
}
  
@keyframes rocketAnimationHide {
    from { transform: translate(0%,0%); opacity: .9; }
    to { transform: translate(-250%,-250%); opacity: 0; }
}

@keyframes ballAnimationShow {
    from {  opacity: 0; transform: translate(37%,-78%); }
    to {  opacity: 1; }
}

@keyframes ballAnimationHide {
    from {  opacity: .8; transform: translate(-35%,-15%); }
    to {  opacity: 1; transform: translate(-22%,-20%);  }
}

@keyframes ballAnimationMove {
    from { transform: translate(-22%,-20%);  }
    to { transform: translate(-35%,-15%);  }
}

@media screen and (min-width: 1201px) , (min-height:601px){
    .section1::after {
        animation-name: rocketAnimationShow;
    }
    .section1::before {
        animation-name: ballAnimationShow;
    }
    .section1-content {
        h1 {
            color: #2c3e50;
        }

        p {
            color: #7f7f7f;
        }
    }
}

@media screen and (max-width: 1200px) , (max-height: 700px){
    .section1::after {
        animation-name: rocketAnimationHide;
    }
    .section1::before {
        animation-name: ballAnimationHide;
    }
    .section1-content {
        z-index: 3;
        h1 {
            color: white;
        }
        p {
            color: rgba(255, 255, 255, 0.824) !important;
        }
    }
}

@media screen and (max-width: 900px) , (max-height: 500px){
    .section1::before {
        animation-name: ballAnimationMove;
    }
}

@media screen and (max-width: 500px) , (max-height: 500px){
    .section1::before {
        transform: translate(-39%,-15%) !important;
    }
}

.container {
    background-color: #efefef;
}

p {
    font-size: 1.2rem;
    color: #7f7f7f;
    line-height: 1.7;
}

.home-content {
    position: relative;
}

.section1 {
    position: relative;
    align-items: flex-start;
    overflow: hidden;
    height: 750px;

    &::before,&::after {
        position: absolute;
        content: '';
        animation-duration: 1s;
        animation-fill-mode: forwards;
    }

    &::before {
        bottom: 0;
        left: 0;
        width: 2000px;
        height: 2000px;
        border-radius: 50%;
        background: linear-gradient(83deg, $PrimaryColor, #656ac6);
        transform: translate(-37%, 78%);
        transition: 1.8s ease-in-out;
    }

    &::after {
        bottom: 2%;
        right: 2%;
        width: 30rem;
        height: 30rem;
        background: url(../../assets/bg_00.svg) no-repeat center;
        background-size: contain;
    }

    .section1-content {
        flex-direction: column;
        margin-top: 60px;
        padding: 0 15px;

        h1 {
            font-size: 3.9rem;
            padding: 15px;
        }
    
        p {
            max-width: 800px;
            text-align: center;
        }
    }

}

.section2 {
    overflow: hidden;
    flex-direction: column;
 
    .section2-content {
        width: 100%;
        padding: 3rem 0;
        background-color: white;
        flex-wrap: wrap;

        .section-left {
            flex-direction: column;
            align-items: flex-start;
            margin: 0 3rem;

            h3 {
                font-size: 2rem;
                margin-bottom: 20px;
            }

            p {
                max-width: 500px;
            }
        }

        &::after {
            content: '';
            width: 30rem;
            height: 30rem;
            background: url(../../assets/bg_04.svg) no-repeat center;
            background-size: contain;
        }
    }

    .section3-content {
        @extend .section2-content;
        background-color: #efefef;

        .section-right {
            flex-direction: column;
            align-items: flex-start;
            margin: 0 3rem;

            h3 {
                font-size: 2rem;
                margin-bottom: 20px;
            }

            p {
                max-width: 500px;
            }
        }

        &::before {
            content: '';
            width: 30rem;
            height: 30rem;
            background: url(../../assets/bg_05.svg) no-repeat center;
            background-size: contain;
        }

        &::after {
            display: none
        }
    }

    .section4-content {
        @extend .section2-content;

        &::after {
            background: url(../../assets/bg_06.svg) no-repeat center;
        }
    }
}

.el-button--large {
    font-size: 16px;
    padding: 12px 40px;
    height: 50px;
}